<template>
  <div class="homes">
<!--    <van-nav-bar title="微平台" left-arrow @click-left="onClickLeft">-->
<!--    </van-nav-bar>-->
    <div class="contents">

      <div class="list">
        <div class="list-item" @click="toPdf(item.articleId)" v-for="(item, index) in listData" :key="index">
          <div class="area">{{item.articleTitle}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/api/index"
import {ref, reactive, toRefs, onMounted} from "vue"
import {useRouter, useRoute} from "vue-router"
import GetNetUtil from "../../../utils/GetNetUtil";

export default {
  setup() {
    let state = reactive({
      listData: []
    })

    const type = useRoute().params.type;
    //根据type 查询列表
    GetNetUtil.requestPost("/microPlatform/getArticleList", "", {type:type}, getArticleList)
    async function getArticleList(resp) {
      if (resp.resultCode === "200") {
        console.log("dataList",resp.data)
        state.listData = resp.data;
      }
    }
    const router = useRouter();
    //跳转pdf
    function toPdf(id) {
      let filePath = '';
      //根据id 查询pdf 文件并返回流
      GetNetUtil.requestGet("/microPlatform/getFileById", {id:id,type:type}, getFilePath)
      async function getFilePath(res) {
        const blob = new Blob([res], {
          type: 'application/pdf;charset-UTF-8', // word文档为msword,pdf文档为pdf
        });
        const objectURL = URL.createObjectURL(blob);
        filePath = objectURL;
        console.log("===============" ,filePath)
        toNext(filePath);
      }
    }
    //跳转具体pdf
    function toNext(filePath){
      router.push({name: "micro-pdf", params: {filePath: filePath,type:type}});
    }

    const onClickLeft = () =>  router.push({name: "micro-platform"});



    return {
      ...toRefs(state),
      onClickLeft,
      toPdf,
    }
  }

  ,
}
</script>

<style lang="scss" scoped>
.homes {
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;

  .nav-right {
    font-size: 8px;
    color: #ffffff;
  }

  .contents {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    width: 100%;
    height: calc(100% - 44px);
    overflow-y: auto;

    .list {
      width: 100%;

      .list-item {
        display: flex;
        justify-content: space-between;
        height: 44px;
        align-items: center;
        font-size: 14px;
        border-bottom: 1px solid #f5f5f5;

        .area {
          margin-left: 10px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          white-space: pre-wrap;
        }
      }
    }
  }
}

</style>